<template>
  <div class="warp" :style="{width: width}">
    <el-image
      v-if="imgUrl"
      :src="imgUrl"
      class="img"
    >
    </el-image>
    <svg-icon v-if="svgIcon" class="img" :icon-class="svgIcon"></svg-icon>
    <div ref="ref_key" class="key">{{ name }}</div>

    <el-tooltip
      class="item"
      effect="light"
      :content="value"
      placement="top-start"
      :open-delay="300"
      :disabled="!valueOverflow"
    >
      <div ref="ref_value" class="value" @mouseenter="setOverflow($event)">{{ value }}</div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'IconKeyValueComp',
  props: {
    imgUrl: {
      type: String,
      default: () => ''
    },
    svgIcon: {
      type: String,
      default: () => ''
    },
    name: {
      type: String,
      default: () => ''
    },
    value: {
      type: String,
      default: () => ''
    },
    width: {
      type: String,
      default: () => '120px'
    }
  },
  data() {
    return {
      valueOverflow: false
    }
  },
  mounted() {
  },
  methods: {
    setOverflow() {
      const el = this.$refs.ref_value
      this.valueOverflow = el.clientWidth < el.scrollWidth
    }
  }
}
</script>

<style scoped lang="scss">

.warp {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 6px;
  grid-row-gap: 6px;

  .img {
    grid-row-start: 1;
    grid-row-end: 3;
    height: 50px;
    width: 50px;
  }

  .key {
    color: #aaa;
    font-weight: 800;
    font-size: 12px;
    line-height: 12px;
    height: 12px;
    margin-top: 5px;
    overflow: hidden; /* 超出一行文字自动隐藏 */
    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
    white-space: nowrap; /*强制不换行*/
  }

  .value {
    color: white;
    line-height: 18px;
    font-size: 18px;
    height: 18px;
    overflow: hidden; /* 超出一行文字自动隐藏 */
    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
    white-space: nowrap; /*强制不换行*/
  }
}

</style>
